<template>
  <div>
    <!-- 戏剧列表 -->
    <div id="much-list">
      <div class="xjlist">
        <div class="hd">
          <h2>戏剧</h2>
          <ul>
            <li><a href="##">最热</a></li>
            <li><a href="##">话剧</a></li>
            <li><a href="##">音乐剧</a></li>
            <li><a href="##">舞剧</a></li>
            <li><a href="##">歌剧</a></li>
          </ul>
          <h3><a href="##">更多&gt;</a></h3>
        </div>

        <!-- 列表 -->
        <div class="bd">
          <div class="pic">
            <!-- <div class="box1"> -->
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>
            <!-- </div> -->
            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>

          <div class="pic">
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>

            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>
          <div class="pic">
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>

            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>
          <div class="pic">
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>

            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>
          <div class="pic">
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>

            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>
          <div class="pic">
            <a href="##">
              <img
                src="https://img3.doubanio.com/pview/event_poster/small/public/647f28bbcfe1982.jpg"
                alt=""
              />
            </a>

            <div class="box2">
              <a href="##">话剧《三湾,那一夜》</a>

              <p>10月14日至10月25日</p>
              <p>国家话剧院-剧场</p>
              <p>1人关注</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
// 多列表
#much-list {
  width: 1040px;
  margin: 0 auto;
  height: 470px;
  font-size: 13px;
  .xjlist {
    width: 675px;
    margin: 0 0 10px;
    .hd {
      height: 26px;
      font-size: 13px;
      margin: 0 0 20px;
      display: flex;
      line-height: 26px;
      position: relative;
      border-bottom: 1px dotted;
      h2 {
        width: 80px;
      }
      ul {
        display: flex;
        li {
          background: #e6e6e6;
          margin: 0 8px 5px 0;
          padding: 1px 10px;
        }
      }
      h3 {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  .bd {
    width: 675px;
    height: 423px;

    float: left;
    .pic {
      width: 317.25px;
      height: 141px;
      float: left;

      img {
        float: left;
      }

      .box2 {
        width: 222.25px;
        height: 21px;
        font-size: 13px;
        color: #666666;
        float: right;
        line-height: 21px;
      }
    }
  }
}
</style>